﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >

<head>
    <title></title>
      <link href="../Resource/Easyui/themes/default/easyui.css" rel="stylesheet" type="text/css" />
	  <link href="../Resource/Easyui/themes/icon.css" rel="stylesheet" type="text/css" />
	  <link href="../Resource/Easyui/themes/default/combobox.css" rel="stylesheet" type="text/css" /> 
        <script src="../Resource/js/jquery-1.4.2.min.js"  charset="utf-8"  type="text/javascript"></script>
        <script src="../Resource/Easyui/jquery.easyui.min.js" charset="utf-8" type="text/javascript"  ></script>
        <script src="../Resource/Easyui/easyui-lang-zh_CN.js" charset="utf-8" type="text/javascript" ></script>
        <script src="../Resource/js/json2.js" charset="utf-8" type="text/javascript"></script>
        <script src="../Service/DemoHandler.ashx" charset="utf-8" type="text/javascript"></script>
</head>
<body>
     <table id="test"></table>
</body>
<script language="javascript" type="text/javascript">
    
    $(function() {
    $('#test').datagrid({
            queryParams:{page:1,rows:2,sort:'aa',order:'desc'},
            title: 'My Title',
            iconCls: 'icon-save',
            width: 600,
            height: 350,
            nowrap: false,
            striped: true,
            method:"get"  ,
            url: '../Service/DemoHandler.ashx/GetData',
            sortName: 'code',
            sortOrder: 'desc',
            idField: 'code',
            frozenColumns: [[
	                { field: 'ck', checkbox: true },
	                { title: 'code', field: 'code', width: 80, sortable: true }
				]],
            columns: [[
			        { title: 'Base Information', colspan: 3 },
					{ field: 'opt', title: 'Operation', width: 100, align: 'center', rowspan: 2,
					    formatter: function(value, rec) {
					        return '<span style="color:red">Edit Delete</span>';
					    }
					}
				], [
					{ field: 'name', title: 'Name', width: 120 },
					{ field: 'addr', title: 'Address', width: 120, rowspan: 2, sortable: true },
					{ field: 'col4', title: 'Col41', width: 150, rowspan: 2 }
				]],
            pagination: true ,
            rownumbers: true,
            singleSelect: false,
            toolbar: [{
                text: 'Add',
                iconCls: 'icon-add',
                handler: function() {
                    alert('add')
                }
            }, {
                text: 'Cut',
                iconCls: 'icon-cut',
                disabled: true,
                handler: function() {
                    alert('cut')
                }
            }, '-', {
                text: 'Save',
                iconCls: 'icon-save',
                handler: function() {
                    alert('save')
                }
}]
            });
        });

</script>

</html>
